<template>
    <div class="public-tree">
        <el-input class="input" v-model="filterText"></el-input>
        <el-tree 
            class="tree" 
            ref="tree"
            node-key="id"
            highlight-current
            :data="treeData" 
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="nodeClick">
        </el-tree>
    </div>
</template>

<script>
import { transformTozTreeFormat } from '@/utils/Tools';
import { queryTreeClass } from '@/service/core/sysConfig';
export default {
    name: 'publicTree',
    props: {
        typeId: {
            type: String,
            default: ''
        },
        defaultProps: {
            type: Object,
            default() {
                return {
                    children: 'children',
                    label: 'name',
                }
            }
        }
    },
    components: {},
    data() {
        return {
            treeData: [],
            filterText: '',
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.queryTreeClassList();
        })
    },
    methods: {
        queryTreeClassList() {
            let params = {
                typeId: this.typeId,
                columns: 'seqNo',
                orders: 'ASC'
            }
            queryTreeClass(params).then(res => {
                this.treeData.splice(0, this.treeData.length);
                if(res.data.code == 1000) {
                    let data = res.data.data;
                    if(Array.isArray(data) && data.length) {
                        data = transformTozTreeFormat(data);
                        this.treeData.push(...data);
                        this.$emit('node-click', this.treeData[0]);
                        this.$nextTick(() => {
                            this.$refs.tree.setCurrentKey(this.treeData[0].id);
                        })
                    }
                }
            })
        },
        filterNode(value, data) {
            if (!value) return true;
            return data[this.defaultProps.label].indexOf(value) !== -1;
        },
        nodeClick(treeNode, node, self) {
            this.$emit('node-click', treeNode, node, self);
        }
    }
}
</script>

<style lang="scss" scoped>
.public-tree {
    height: 100%;
    display: flex;
    flex-direction: column;
    .tree {
        flex: 1;
        overflow: auto;
        margin-top: 5px;
    }
}
</style>

